yubo 个人技术博客

ES6 模块化

入口文件引入：

<script src='./入口文件.js' type='module'></script>

基本导出方式：

export const fn = () => console.log('hello');

const arr = [1, 2, 3, 4, 5];
const num = 10;
               // 名称替换
export { arr, num as number }

导出文件尽量用 const，防止后续文件再次使用该名称

基本导入方式：

import { arr, number } from './导出文件.js';  // ES6 模块化规范：导入必须写在文件最开头

import * as util from './导出文件.js';  // 全部导入

import './init.js';  // 导入执行

默认导出方式：

export default a;

export default {  // 默认导出一个文件只能有一个 export default
    fn () {
        console.log('hello');
    }
}

默认导入方式：

import util from './导出文件.js';

ES6 模块化 VS CommonJS

CommonJS：依赖延迟声明

• 优点：某些时候可以提高效率，较为灵活（即用即导入）
• 缺点：可读性较差

ES6 模块化：预声明

• 优点：可读性好
• 缺点：效率较低

node 强制使用 ES 模块化

1. 后缀名改为 .mjs
2. 最近的 package.js 文件 type 值改为 'module'